<template>
    <v-row justify="center">
        <v-col v-for="(_, n) in 55" :key="n" cols="auto" class="card">
            <v-card  width="100"  class="text-center pa-2">
                <v-avatar size="80"  image="https://cdn.vuetifyjs.com/images/parallax/material.jpg"></v-avatar>
                <div class="text-center text-body-2  mt-2 tixing" :class="[name.length>7?'moving':'',isLoging?'logined':'unLogin']" >{{name}}</div>
            </v-card>
        </v-col>
    </v-row>
</template>

<script setup lang='ts'>
import { ref, onMounted, reactive } from 'vue';
let isLoging = ref(true)
const name = ref('吴嘟嘟顶')
</script>
<style scoped lang='scss'>
.card{
  position: relative;
  overflow: hidden;
  &:hover{
    opacity: 0.65;
    top: -10px;
    cursor:pointer;
  } 
   .unLogin{
    display: inline-block;
    white-space: nowrap;
        &::before{
       display: inline-block;
       background-color: gainsboro;  
       width: 8px;
       height: 8px;
       border-radius: 50%;
       content: '';
       margin-right: 4px;
    }
    }
   .logined{
    @extend .unLogin;
    &::before{
       background-color: green;  
    } 
  }
.moving{
  animation: move 5s linear infinite normal ;
}
@keyframes move {
    0% {
        transform: translate(50%, 0);
    }
    100% {
        transform: translate(calc(-100% + 100px), 0);
    }
}
}

</style>
